﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <meta charset="utf-8" />
    <title>关联物料</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
    <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
    <style type="text/css">
      .container {
        padding: 40px 20px;
        background: #fff;
        margin: 20px 0;
      }
      .container ul.data-list {
        width: 40%;
        border: 1px solid #e5e5e5;
      }
      .container ul.data-list li {
        line-height: 32px;
        padding: 0px 10px;
        width: 360px;
        overflow: hidden;
        height: 30px;
      }
      .container ul.data-list li:hover {
        background-color: rgba(0, 150, 136, 0.73);
        color: #fff;
        cursor: pointer;
        font-weight: bold;
        transition: 0.4s;
      }
      .container ul.data-list li.selected {
        background-color: #009688;
        color: #fff;
      }
      .container ul.data-list li.selectedDel {
        background-color: #009688;
        color: #fff;
      }
      .button-box {
        width: 20%;
        display: flex;
        justify-content: space-between;
        padding: 20px;
        gap: 5px;
      }
      .container-ul {
        display: flex;
      }
      .hidden {
        display: none;
      }
      .tianjia {
        width: 80px;
        height: 38px;
        padding: 0 18px;
        background-color: #009688;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      .tianjia:hover {
        opacity: 0.8;
      }
      .shanchu {
        width: 80px;
        height: 38px;
        padding: 0 18px;
        background-color: #ff5722;
        color: #fff;
        border: none;
        cursor: pointer;
      }
      .shanchu:hover {
        opacity: 0.8;
      }
      .data-list span {
        margin-left: 5px;
      }
      .fanhui {
        width: 80px;
        height: 38px;
        padding: 0 18px;
        background-color: #ffffff;
        color: #000;
        cursor: pointer;
        border: 1px solid #e5e5e5;
      }
      .fanhui:hover {
        opacity: 0.8;
      }
      .layui-col-space12 {
        display: flex;
        padding: 20px 0;
      }
      .layui-col-md5 {
        margin-left: 15%;
      }

      /* 包装数量输入框样式 */
      .data-list .package-num-input {
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 2px 5px;
        margin-left: 5px;
        text-align: center;
        font-size: 12px;
        background-color: #fff;
        width: 60px;
      }

      .data-list .package-num-input:focus {
        border-color: #009688;
        outline: none;
        box-shadow: 0 0 3px rgba(0, 150, 136, 0.3);
      }

      .data-list .package-num-input:hover {
        border-color: #009688;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="layui-row layui-col-space12">
        <div class="layui-col-md7">
          <h5>未添加物料</h5>
        </div>
        <div class="layui-col-md5">
          <h5>已添加物料</h5>
        </div>
      </div>
      <div class="container-ul">
        <!-- prettier-ignore -->
        <ul class="data-list" id="lList">
				<c:forEach items="${otherMaterialList}" var="oml">
					<c:choose>
						<c:when test="${oml.create_code eq '1'}">
							<li>${oml.name}<span>${oml.classify_name}</span>
							<input type="hidden" value="${oml.id}" class="selectSermigood" />
							<span>包装数量：</span><input type="text" class="package-num-input" placeholder="1" style="width:60px" />
							</li>
						</c:when>
						<c:otherwise>
							<li>${oml.name}<span>${oml.classify_name}</span>
							<input type="hidden" value="${oml.id}" class="selectSermigood" />
							</li>
						</c:otherwise>
					</c:choose>
				</c:forEach>
			</ul>
        <div class="button-box">
          <button type="button" name="button" id="add" class="tianjia">添 加</button>
          <button type="button" name="button" id="remove" class="shanchu">删 除</button>
          <button type="button" id="rollback" class="layui-btn layui-btn-primary fanhui">返回</button>
        </div>
        <ul class="data-list" id="rList">
          <c:forEach items="${myMaterialList}" var="mml">
            <li>
              ${mml.name}
              <span>${mml.classify_name}</span>
              <span>${mml.package_num}</span>
              <input type="hidden" value="${mml.id}" class="selectSermigood" />
            </li>
          </c:forEach>
        </ul>
      </div>
    </div>
    <script type="text/javascript">
      $(function () {
        var lList = $("#lList");
        var llList = document.getElementById("lList");
        var rList = $("#rList");
        var items = $(".data-list li");
        for (var i = 0; i < items.length; i++) {
          items[i].onclick = itemsclick;
          items[i].ondblclick = itemsdblclick;
        }

        // 阻止输入框事件冒泡，避免与双击事件冲突
        $(".data-list .package-num-input").on("click", function (e) {
          e.stopPropagation();
        });

        $(".data-list .package-num-input").on("mousedown", function (e) {
          e.stopPropagation();
        });

        $(".data-list .package-num-input").on("change", function (e) {
          e.stopPropagation();
        });

        // 输入框获得焦点时，取消父级li的选中状态
        $(".data-list .package-num-input").on("focus", function (e) {
          e.stopPropagation();
          $(this).closest("li").removeClass("selected selectedDel");
        });

        // 添加整数输入验证
        $(".data-list .package-num-input").on("input", function (e) {
          var value = $(this).val();
          // 只允许输入数字，去除所有非数字字符
          value = value.replace(/[^\d]/g, "");
          // 确保最小值为1
          if (value === "" || parseInt(value) < 1) {
            value = "1";
          }
          $(this).val(value);
        });

        // 输入框失去焦点时，重新绑定父级li的点击事件
        $(".data-list .package-num-input").on("blur", function (e) {
          e.stopPropagation();
        });
        function itemsdblclick() {
          var ids = new Array();
          var nums = new Array();
          var id = $(this).find("input:eq(0)").val();
          ids.push(id);
          var packageNum = $(this).find(".package-num-input").val();
          if ("undefined" != packageNum) {
            if (packageNum == "") {
              alert("包装数量不能为空");
              return false;
            }
            nums.push(packageNum);
          } else {
            nums.push("");
          }
          var obj = this;
          if (this.parentNode == llList) {
            $.ajax({
              url: "${ctx}/products/addProductMaterial",
              data: { materialIds: ids.toString(), prodId: "${proId}", packageNums: nums.toString() }, //请求的附加参数，用json对象
              method: "POST",
              async: false,
              success: function (data) {
                if (data == "1") {
                  /* obj.className="selectedDel";
 	       						rList.append(obj); */
                  location.reload();
                } else {
                  alert("移动失败");
                }
              },
            });
          } else {
            $.ajax({
              url: "${ctx}/products/delProductMaterial",
              data: { materialIds: ids.toString(), prodId: "${proId}" }, //请求的附加参数，用json对象
              method: "POST",
              async: false,
              success: function (data) {
                if (data == "1") {
                  /* obj.className="selected";
 	       						lList.append(obj); */
                  location.reload();
                } else {
                  alert("移动失败");
                }
              },
            });
          }
        }
        function itemsclick() {
          var classname = this.className;
          if (classname == "selected" || classname == "selectedDel") {
            this.className = "";
          } else {
            if ($(this).parent().attr("id") == "lList") {
              this.className = "selected";
            } else {
              this.className = "selectedDel";
            }
          }
        }
        function itemsMove() {
          if (this.id === "add") {
            var ids = new Array();
            var nums = new Array();
            var items = $(".data-list li.selected");
            var check = true;
            for (var i = 0; i < items.length; i++) {
              var id = $(items[i]).find("input:eq(0)").val();
              ids.push(id);
              var packageNum = $(items[i]).find(".package-num-input").val();
              if ("undefined" != packageNum) {
                if (packageNum == "") {
                  check = false;
                  alert("包装数量不能为空");
                  return false;
                }
                nums.push(packageNum);
              } else {
                nums.push("");
              }
            }
            if (check) {
              $.ajax({
                url: "${ctx}/products/addProductMaterial",
                data: { materialIds: ids.toString(), prodId: "${proId}", packageNums: nums.toString() }, //请求的附加参数，用json对象
                method: "POST",
                async: false,
                success: function (data) {
                  if (data == "1") {
                    /* for(var i = 0;i<items.length;i++){
	 	                        		items[i].className="";
	 	       						    items[i].className="selectedDel";
	 	           						rList.append(items[i]);
		           					} */
                    location.reload();
                  } else {
                    alert("移动失败");
                  }
                },
              });
            }
          } else {
            var ids = new Array();
            var items = $(".data-list li.selectedDel");
            for (var i = 0; i < items.length; i++) {
              var id = $(items[i]).find("input").val();
              ids.push(id);
            }
            $.ajax({
              url: "${ctx}/products/delProductMaterial",
              data: { materialIds: ids.toString(), prodId: "${proId}" }, //请求的附加参数，用json对象
              method: "POST",
              async: false,
              success: function (data) {
                if (data == "1") {
                  for (var i = 0; i < items.length; i++) {
                    /* items[i].className="";
 	       						    items[i].className="selected";
 	                        		lList.append(items[i]); */
                    location.reload();
                  }
                } else {
                  alert("移动失败");
                }
              },
            });
          }
        }
        $("#add").on("click", itemsMove);
        $("#remove").on("click", itemsMove);
      });
      document.getElementById("rollback").addEventListener("click", function () {
        window.history.back();
      });
    </script>
  </body>
</html>
